<template>
  <div>

    <template>
      <div id="app">
        始发地：<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
        目的地：<el-cascader size="large" :options="options1" v-model="selectedOptions1" @change="handleChange1"></el-cascader>
        <el-button @click="getStatementList()">查询</el-button>
        <el-button type="primary" @click="addFlag = true">添加</el-button>
        <br>
        <el-button @click="getStatementList(1)">按始发地排序</el-button>
        <el-button @click="getStatementList(2)">按目的地排序</el-button>
        <el-button @click="getStatementList(3)">按价格排序</el-button>
      </div>
    </template>


       <el-dialog title="线路信息" :visible.sync="addFlag">
          <el-form :model="addBean">
            <el-form-item label="始发地" :label-width="formLabelWidth">
              <el-cascader size="large" :options="options" v-model="addStartOptione" @change="addStartChange"></el-cascader>
            </el-form-item>
            <el-form-item label="目的地" :label-width="formLabelWidth">
              <el-cascader size="large" :options="options" v-model="addEndOptione" @change="addEndChange"></el-cascader>
            </el-form-item>
            <el-form-item label="运输时效" :label-width="formLabelWidth">
              <el-input v-model="addBean.stime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
              <el-input v-model="addBean.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="最低价格" :label-width="formLabelWidth">
              <el-input v-model="addBean.sPrice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上门提货" :label-width="formLabelWidth">
              <div>
                <el-radio-group v-model="addBean.ti">
                  <el-radio-button label="1">是</el-radio-button>
                  <el-radio-button label="0">否</el-radio-button>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="送货上门" :label-width="formLabelWidth">
              <div>
                <el-radio-group v-model="addBean.song">
                  <el-radio-button label="1">是</el-radio-button>
                  <el-radio-button label="0">否</el-radio-button>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addFlag = false">取 消</el-button>
            <el-button type="primary" @click="addStatement">确 定</el-button>
          </div>
        </el-dialog>



      <el-dialog title="编辑信息" :visible.sync="updFlag">
          <el-form :model="updBean">
            <el-form-item label="始发地" :label-width="formLabelWidth">
              <el-cascader size="large" :options="options" v-model="updStartOptione" @change="updStartChange"></el-cascader>
            </el-form-item>
            <el-form-item label="目的地" :label-width="formLabelWidth">
              <el-cascader size="large" :options="options" v-model="updEndOptione" @change="updEndChange"></el-cascader>
            </el-form-item>
            <el-form-item label="运输时效" :label-width="formLabelWidth">
              <el-input v-model="updBean.stime" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
              <el-input v-model="updBean.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="最低价格" :label-width="formLabelWidth">
              <el-input v-model="updBean.sprice" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上门提货" :label-width="formLabelWidth">
              <div>
                <el-radio-group v-model="updBean.ti">
                  <el-radio-button label="1">是</el-radio-button>
                  <el-radio-button label="0">否</el-radio-button>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="送货上门" :label-width="formLabelWidth">
              <div>
                <el-radio-group v-model="updBean.song">
                  <el-radio-button label="1">是</el-radio-button>
                  <el-radio-button label="0">否</el-radio-button>
                </el-radio-group>
              </div>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="updFlag = false">取 消</el-button>
            <el-button type="primary" @click="updStatement">确 定</el-button>
          </div>
        </el-dialog>



<template>
  <el-table :data="StatementList" style="width: 100%">
    <el-table-column label="id" prop="id" width="180"></el-table-column>
    <el-table-column label="始发地" prop="saddress" width="180"></el-table-column>
    <el-table-column label="目的地" prop="maddress" width="180"></el-table-column>
    <el-table-column label="运输时效" prop="stime" width="180"></el-table-column>
    <el-table-column label="价格" prop="price" width="180"></el-table-column>
    <el-table-column label="最低价格" prop="sprice" width="180"></el-table-column>
    <el-table-column label="上门提货" prop="ti" width="180"></el-table-column>
    <el-table-column label="送货上门" prop="song" width="180"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="upd(scope.row)">编辑</el-button>
        <el-button  size="mini" type="danger" @click="delStatement(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
  </div>
</template>


<script>
import { regionData,CodeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      SearchBean:{},
      StatementList:[],
      options: regionData,
      selectedOptions: [],
      options1: regionData,
      selectedOptions1: [],
      addFlag:false,
      addBean:{},
      addStartOptione:[],
      addEndOptione:[],
      updFlag:false,
      updBean:{},
      updStartOptione:[],
      updEndOptione:[],
      formLabelWidth:"120px"
    };
  },
  
  mounted(){
    this.getStatementList();
  },
  methods:{
    upd:function(row){
      this.updBean=row
      this.updFlag=true
    },
    updStatement:function(){
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/transport/tmsStatement/updStatement",
        params: { 
          access_token: localStorage.getItem("access_token"),
          id:this.updBean.id,
          sAddress:this.updBean.sAddress,
          mAddress:this.updBean.mAddress,
          stime:this.updBean.stime,
          price:this.updBean.price,
          sPrice:this.updBean.sPrice,
          ti:this.updBean.ti,
          song:this.updBean.song,
          }
      }).then(function(res) {
        console.log("{}", res);
        if (res.data.code == 200) {
          window.console.log("res{}",res)
          $this.getStatementList()
          $this.updFlag=false
        }
      });
    },
    delStatement:function(row){
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/transport/tmsStatement/delStatement",
        params: { 
          access_token: localStorage.getItem("access_token"),
          id:row.id
          }
      }).then(function(res) {
        console.log("{}", res);
        if (res.data.code == 200) {
          window.console.log("res{}",res)
          $this.getStatementList()
        }
      });
    },
    addStatement:function(){
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/transport/tmsStatement/addStatement",
        params: { 
          access_token: localStorage.getItem("access_token"),
          sAddress:this.addBean.sAddress,
          mAddress:this.addBean.mAddress,
          stime:this.addBean.stime,
          price:this.addBean.price,
          sPrice:this.addBean.sPrice,
          ti:this.addBean.ti,
          song:this.addBean.song,
          }
      }).then(function(res) {
        console.log("{}", res);
        if (res.data.code == 200) {
          window.console.log("res{}",res)
          $this.getStatementList()
          $this.addFlag=false
        }
      });
    },
    updStartChange:function(value){
        let data =CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]];
        window.console.log("起始地",data)
        this.updBean.sAddress=data
    },
    updEndChange:function(value){
        let data =CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]];
        window.console.log("目的地",data)
        this.updBean.mAddress=data
    },
    addStartChange:function(value){
        let data =CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]];
        window.console.log("起始地",data)
        this.addBean.sAddress=data
    },
    addEndChange:function(value){
        let data =CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]];
        window.console.log("目的地",data)
        this.addBean.mAddress=data
    },
    handleChange (value) {
      let data =CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]];
      window.console.log(data)
      this.SearchBean.sAddress=data
    },
    handleChange1 (value) {
      let data =CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]];
      window.console.log(data)
      this.SearchBean.mAddress=data
    },
    getList:function(){
      window.console.log(this.SearchBean)
    },
    getStatementList(ord) {
      window.console.log(this.SearchBean)
      var $this = this;
      this.axios({
        method: "get",
        url: "http://localhost:9999/transport/tmsStatement/StatementList",
        params: { 
          access_token: localStorage.getItem("access_token"),
          mAddress:this.SearchBean.mAddress,
          sAddress:this.SearchBean.sAddress,
          ord:ord
          }
      }).then(function(res) {
        console.log("{}", res);
        if (res.data.code == 200) {
          window.console.log("res{}",res)
          $this.StatementList=res.data.obj.list
          window.console.log("StatementList{}",$this.StatementList)
        }
      });
    },
      
  }
};
</script>